<script setup>
    import * as THREE from 'three';
    import { onMounted, ref } from 'vue';
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

    let domRender = ref(null);

    let containWidth = 500;
    let containHeight = 500;
    const renderer = new THREE.WebGLRenderer({
        antialias: true,
    });
    renderer.setSize(containWidth, containHeight);
    // document.getElementById('line-container').appendChild(renderer.domElement);

    let scene = new THREE.Scene();
    let camera = new THREE.PerspectiveCamera(45, containWidth / containHeight, 1, 200);
    camera.position.set(0, 0, 100);

    let points = [];
    points.push(new THREE.Vector3(-10, 0, 0));
    points.push(new THREE.Vector3(0, 10, 0));
    points.push(new THREE.Vector3(0, 0, 10));

    let geometry = new THREE.BufferGeometry().setFromPoints(points);

    let material = new THREE.LineBasicMaterial({
        color: 0x0000ff,
    });

    let line = new THREE.Line(geometry, material);

    scene.add(line);

    renderer.render(scene, camera);

    let constrols = new OrbitControls(camera, renderer.domElement);
    constrols.addEventListener('change', ()=>{
        renderer.render( scene, camera );
    });

    // 
    let axesHelper = new THREE.AxesHelper(100);
    scene.add(axesHelper);

    let animate = () => {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    };

    onMounted(() => {
        document.querySelector('#line-container').appendChild(renderer.domElement);
        // domRender.value = renderer.domElement; 
        
    });
    

</script>

<template>
    <div id="line-container" ></div>
</template>

<style scoped>
    #line-container {
        width: 100%;
        height: 500px;
    }

</style>